<template>   
    <div id="app">   
      <p>   
        <el-row :gutter="10">   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">   
            <span>持续时间：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-input type="text" v-model.number="duration"  
                 placeholder="请输入持续时间"></el-input>   
          </el-col>   
        </el-row>   
      </p>   
      <p>   
        <el-row :gutter="10">   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">   
            <span>偏移量：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-input type="text" v-model.number="offsetVal" 
                 placeholder="请输入偏移量"></el-input>   
          </el-col>   
        </el-row>   
      </p>   
      <p>   
        <el-row>   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">   
            <span>消息类型：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-select v-model="type" placeholder="请选择倾向性消息类型">   
              <el-option label="成功" value="success"></el-option>   
              <el-option label="警告" value="warning"></el-option>   
              <el-option label="消息" value="info"></el-option>   
              <el-option label="错误" value="error"></el-option>   
            </el-select>   
          </el-col>   
        </el-row>   
      </p>   
       <!-- 由于Message消息固定在浏览器中间部分，所以位置设置无效，此段删除或注释掉   
     <p>   
      <el-row>   
        <el-col :span="2" style="text-align: center;padding-top: 10px;">   
          <span>弹出位置：</span>   
        </el-col>   
        <el-col :span="4">   
          <el-select v-model="position" placeholder="请选择弹出位置">   
            <el-option label="右上角" value="top-right"></el-option>   
            <el-option label="右下角" value="bottom-right"></el-option>
            <el-option label="左下角" value="bottom-left"></el-option>   
            <el-option label="左上角" value="top-left"></el-option>   
          </el-select>   
        </el-col>   
      </el-row>   
    </p> -->   
    <p>   
      <el-row>   
        <el-col :span="2">   
          <el-button type="primary" @click="openMessage">弹出消息</el-button>   
        </el-col>   
      </el-row>   
    </p>   
  </div>   
</template>   
<script>   
  export default {   
    name: 'App',   
    data() {   
      return {   
        offsetVal: 0, // 控制偏移位置   
        duration: 2000, // 控制显示时长，单位ms，0表示不关闭   
        type: 'success', // 显示信息的倾向性   
      }   
    },   
    methods: {   
      openMessage() {   
        this.$message({   
          title: '标题',   
          message: '内容',   
          offset: this.offsetVal,   
          type: this.type,   
          duration: this.duration   
        })   
      },   
    },   
  }   
</script>   
<style></style>